<template>
  <div class="ca-header">
    <div class="ca-header-back" @click="onBack"><span v-if="isBackShow">返回</span></div>
    <div class="ca-header-title"><slot></slot></div>
    <div class="ca-header-right"><slot name="extra"></slot></div>
  </div>
</template>

<script>
export default {
  name: 'caheader',
  props: {
    isBackShow: Boolean,
  },
  methods: {
    onBack() {
      this.$router.history.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.ca-header {
  height: 52px;
  background: #f72a26;
  display: flex;
  color: #fff;
  line-height: 52px;

  &-title {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &-back,
  &-right {
    padding: 0 15px;
  }
}
</style>
